<style lang="scss" scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 22px;

    .demo-form-inline {
        display: flex;
        align-items: center;

        div {
            margin-bottom: 0;
        }
    }
}
</style>
<template>
    <div>
        <el-tabs v-model="activeName">
            <el-tab-pane label="以上线(99999)" name="1"></el-tab-pane>
            <el-tab-pane label="未上线(0)" name="2"></el-tab-pane>
        </el-tabs>
        <div class="header">
            <el-form :inline="true" label-width="80px" :model="search" ref="searchForm" class="demo-form-inline">
                <el-form-item label="商品名称" prop="productName">
                    <el-input v-model="search.productName" placeholder="请输入商品名称" />
                </el-form-item>
                <el-form-item label="商品编码" prop="produceId">
                    <el-input v-model="search.produceId" placeholder="请输入商品编码" />
                </el-form-item>
                <el-form-item label="条形码" prop="sku">
                    <el-input v-model="search.sku" placeholder="请输入条形码" />
                </el-form-item>
                <el-form-item label="所属分类" prop="cateName">
                    <el-input v-model="search.cateName" placeholder="所属分类" />
                </el-form-item>
            </el-form>
            <div>
                <el-link type="primary" @click="resetForm('searchForm')" style="margin-right: 16px ;">重置当前查询</el-link>
                <el-button @click="search.current = 1; getProduceList()" type="primary"
                    icon="el-icon-search">查询</el-button>
            </div>
        </div>
        <div style="margin: 16px 5px ;">
            <el-button type="primary" icon="el-icon-success" @click="start()">批量启用</el-button>
            <el-button type="primary" icon="el-icon-error" @click="stop()">批量禁用</el-button>
            <el-button type="danger" icon="el-icon-delete-solid">批量删除</el-button>
            <el-button type="info" icon="el-icon-s-tools">统一设置门店库存</el-button>
        </div>
        <el-table style="width: 100%" :data="produceList">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="gallery" label="商品图片" width="180">
                <template slot-scope="scope">
                    <img :src="scope.row.gallery" style="width: 50px; height: 50px" :onerror="defaultImg" />
                </template>
            </el-table-column>
            <el-table-column prop="productName" label="商品名称"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="specs" label="规格"></el-table-column>
            <el-table-column prop="stock" label="月售"></el-table-column>
            <el-table-column prop="cateName" label="
            所属分类"></el-table-column>
            <el-table-column prop="sku" label="条形码(SKU)"></el-table-column>
            <el-table-column prop="produceId" label="商品编码"></el-table-column>

            <el-table-column prop="online" label="是否启用">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.value" inactive-color="#13ce66" active-color="#ff4949"
                        :disabled="value">
                    </el-switch>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="small" @click="$router.push('/admin/produce/editProduce/'+ scope.row.id)">编辑</el-button>
                    <el-button @click="handleClick(scope.row.id)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="pagination.current" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pagination.size"
                layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>

import { GetProduceList, DelectProduce } from '@/api/produce';
export default {
    data() {
        return {
            produceList: [

            ],
            search: {
                current: 1,
                size: 10,
                order: "desc",
                productName: "",
                produceId: "",
                sku: "",
                cateName: "",
            },
            // 分页信息
            pagination: {

            },
            activeName: '1',
            value: true,
            defaultImg: 'this.src="' + require('../../../assets/cxk.jpg') + '"',
        }
    },
    created() {
        this.getProduceList()
    },
    methods: {
        handleClick(res) {
            this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                DelectProduce(res)
                .then(res => {
                    if (res.data.code == 0) {
                        this.$message({
                            message: "删除成功",
                            type: "success"
                        })
                    } else {
                        this.$message({
                            message: "添加失败",
                            type: "warning"
                        })
                    }
                })
            this.getProduceList()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        delProduceList() {
            // var list = this.produceList
        },
        start() {
            if (this.value) {
                this.value = false
            }
        },
        stop() {
            if (!this.value) {
                this.value = true
            }
        },
        // 重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            // console.log(this.$refs[formName]);
            this.getProduceList();
        },
        getProduceList() {
            // 获取列表
            var search = {};
            for (var k in this.search) {
                // 如果不为空添加到搜索列表
                if (this.search[k]) {
                    search[k] = this.search[k]
                }
            }
            GetProduceList(this.search)
                .then(res => {
                    this.produceList = res.data.data;
                    this.pagination = res.data.pagination
                    this.pagination.current = this.pagination.current * 1;
                    this.pagination.size = this.pagination.size * 1;
                })
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            // 当每页多少条发生变化时候，重新更新搜索条件size
            this.search.size = val;
            // 重新获取列表
            this.getProduceList();
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            // 当前页发生变化时候更新 搜索条件的当前页
            this.search.current = val;
            // 重新获取列表
            this.getProduceList();
        }
    },
}
</script>